$text-color1:#1c1c1c;
$text-color2:#696575;
$text-color3:#45414b;
$shadow-c: rgba(114, 114, 114, 0.15);
$border-color1:#e2e2e2;
$border-color1:#e2e2e2;
$text_color1:#45414b;
$lite_posts:.17rem;
$date_color:rgb(138,138,138);

.content_box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .articleContent{
        color: $text-color1;
        font-size: 18px;
        .category_content{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .articleBox{
                overflow: hidden;
                position: relative;
                border-radius: 4px;
                width: 202px;
                .bgBox6{
                    width: 190px;
                    height: 150px;
                    background-size: cover;
            }
            .mask{
                position: relative;
                .contentText{
                    font-size: 12px;
                }
                .typeBtn{
                    position: absolute;
                    top: -30px;
                    left: 6px;
                    margin-bottom: 2px;
                        a {
                            display: inline-block;
                            padding: 6px;
                            color: $border-color1;
                            background-color: $text_color1;
    
                            &:hover {
                                background-color: #393440;
                            }
                    }
                }
            }
            }
           
           }
        h1.title{
            color: $text-color2;
            margin: 15px 0;
            font-size: 36px;
            line-height: 1.24;
            letter-spacing: -0.005em;
            font-weight: 500;
            line-height: 1.2;
        }
        .author{
            font-size: 12px;
            letter-spacing: 1px;
            .type{
                letter-spacing: 1.5px;
                font-weight: 700;
            }
        }
        img{
            margin: 20px 0;
            width: 100%;
            border-radius: 4px;
            min-width: 300px;
        }
        p{
            margin-bottom: 25px;
        }
        h2{
            font-size: 1.285em;
            color: $text-color3;
        }
        h3{
            font-size: 1.125em;
            color: $text-color3;
            margin: 27px 0 15px 0;
        }
        ul{
            margin: 28px 0 28px 35px;
            li{
                margin-bottom: 7px;
                list-style: disc !important; /* 使用实心点来表示列表项 */
                &::marker{
                }
            }
       
        }
        .subTitle{
            a{
                color: #336df4;
            }
        }
        .subText{
            p{
                font-weight: 400;
            }
        }
    }
}


/* \手机端	*/
@media screen and (max-width: 765px) {
    .breadCrumb {
        padding: 0 20px;
        padding-top: 10px;
    }
    .content_box {
        display: block;
        padding: 0 20px;
        .articleContent{
            .categoryTitle{
                margin: 20px 0;
            }
            .category_content{
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .articleBox{
                        width: 185px;
                        margin-bottom: 10px;
                        .contentText{
                            height: 50px;
                            h2{
                                a{
                                    font-size: 14px;
                                }
                            }
                        }
                }
               
               }
        }
      

        .aside{
            position: relative;
            width: 390px;
            margin:20px auto;
            padding: 0;
            .relatedPosts{
                .categoryTitle{
                    margin: 0 0 20px 0;
                }
                .relatedHeading{
                    margin-bottom: 2px;
                    font-size: 14px;
                    padding: 9px 14px;
                    border-radius: 2px;
                }
                .subPosts{
                    width: 390px;
                    height: 80px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #e2e2e2;
                    .postsText{
                        padding-top: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .postsDate{
                            font-size: 14px;
                        }
                    }
                    .bgImg{
                        background-size: cover;
                    }
                }
            }
          }
    }
}